<template>
  <div class="bg">
    <Loading v-show="LOADING"></Loading>

    <nav-com
      title="我的市场"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>

    <div class="box_padding">
      <van-row class="myteam_part1">
        <!-- <div class="myteam_title">
          <span>我的市场</span>
          <span
            v-if="userInfo.is_sep_income == 1"
            class="dlfzr"
            @click="toIndependent()"
            >独立负责人
            <van-icon name="arrow" size="16" color="#fff" />
          </span>
          <span v-if="userInfo.is_sep_income != 1"
            class="dlfzr2"
            >独立负责人
            <van-icon name="arrow" size="16" color="#fff" />
          </span>
        </div> -->
        <!-- <div class="my_part3">
          <div
            style="
              font-weight: 500;
              display: flex;
              flex-direction: column;
              flex: 1;
              align-items: center;
              justify-content: center;
            "
            @click="showAllShareClick()"
          >
            <span style="color: #fe4b20; line-height: 30px; font-size: 19px">{{
              inviteData.sum_user_count
            }}</span>
            <span style="font-size: 16px">总分享人数</span>
          </div>
          <ul style="">
            <li>
              <p>{{ userInfo.m_one_sum ? userInfo.m_one_sum : 0 }}</p>
              <span>本月业绩</span>
            </li>
            <li>
              <p>{{ userInfo.y_one_sum }}</p>
              <span>昨日业绩</span>
            </li>
            <li>
              <p>{{ userInfo.one_sum }}</p>
              <span>本日业绩</span>
            </li>
          </ul>
        </div> -->
        <div style="margin-top: 2vw">
          <van-tabs
            color="#FF6F4E"
            @click="childActive(active)"
            title-active-color="#FF6F4E"
            v-model="active"
          >
            <van-tab
              v-for="(item, index) in tabList"
              :key="index"
              :title="item.title"
            >
              <div
                v-if="inviteDataList.length == 0 && active == 1"
                class="noData"
              >
                --暂无数据--
              </div>
              <div
                v-if="todayData.length == 0 && active == 0"
                class="noData"
              >
                --暂无数据--
              </div>
              <!-- <div
                style="
                  margin-top: 15px;
                  border-radius: 10px;
                  background-color: white;
                  padding: 10px;
                  display: flex;
                  justify-content: space-around;
                "
                v-if="active == 1"
              >
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                  "
                >
                  <div
                    style="font-size: 14px; line-height: 30px; color: #000000"
                  >
                    我的总分享人数
                  </div>
                  <div
                    style="
                      color: #fe4b20;
                      line-height: 30px;
                      font-size: 18px;
                      text-align: center;
                    "
                  >
                    {{ inviteData.team_count }}
                  </div>
                </div>
                <i
                  style="height: 35px; width: 1px; background-color: #e5e5e5"
                ></i>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <div
                    style="font-size: 14px; line-height: 30px; color: #000000"
                  >
                    我的分享人数
                  </div>
                  <div
                    style="
                      color: #fe4b20;
                      line-height: 30px;
                      font-size: 18px;
                      text-align: center;
                    "
                  >
                    {{ inviteData.total }}
                  </div>
                </div>
              </div> -->
              <ul class="teamlist" v-if="active == 1">
                <li v-for="(item, index) in inviteDataList" :key="index">
                  <div
                    style="
                      color: #808080;
                      line-height: 35px;
                      border-bottom: 1px solid #eeeeee;
                      font-size: 13px;
                    "
                  >
                    {{ item.addtime | formatTime }}
                  </div>
                  <div class="teamlist_bottom">
                    <p>{{ item.user.mobile | mobileFilter }}</p>
                    <p>{{ item.role }}</p>
                  </div>
                </li>
              </ul>
              <ul class="teamlist" v-if="active == 0">
                <li v-for="(item, index) in todayData" :key="index">
                  <div
                    class="teamlist_bottom2"
                    style="
                      display: flex;
                      justify-content: space-between;
                      border-bottom: 1px solid #eeeeee;
                    "
                  >
                    <div>
                      {{ item.mobile | mobileFilter }}({{ item.role_name }})
                    </div>
                    <div style="font-size: 14px">
                      今日销售
                      <span style="color: #fe4b20">{{ item.order_sum }}</span>
                      台
                    </div>
                  </div>
                  <div
                    class="teamlist_bottom2"
                    style="
                      display: flex;
                      justify-content: space-between;
                      color: #808080;
                      font-size: 12px;
                    "
                  >
                    <div>
                      {{ item.hai_mobile | mobileFilter }}
                      {{
                        item.hai_role_name ? "(" + item.hai_role_name + ")" : ""
                      }}
                    </div>
                    <div style="font-size: 14px" @click="showUserList(item)">
                      <span style="color: #fe4b20">{{ item.user_sum }}</span
                      >人 <van-icon name="arrow" />
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>
          </van-tabs>
        </div>
      </van-row>
    </div>
    <van-popup v-model="show">
      <div class="popup">
        <div
          style="
            color: rgba(135, 33, 24, 1);
            line-height: 50px;
            font-weight: 600;
          "
        >
          {{ userData.mobile | mobileFilter
          }}{{ userData.role_name ? "(" + userData.role_name + ")" : "" }}
        </div>
        <div
          style="
            color: rgba(135, 33, 24, 1);
            line-height: 20px;
            font-weight: 600;
          "
        >
          总人数:{{ userList.length }}人
        </div>

        <div
          style="
            width: 85vw;
            font-size: 10px;
            color: rgba(135, 33, 24, 1);
            margin: 10px;
            overflow: scroll;
          "
        >
          <!--  -->
          <div
            style="
              display: flex;
              justify-content: space-between;
              line-height: 35px;
              justify-content: flex-start;
              flex-wrap: wrap;
              height: 200px;
            "
          >
            <div
              v-for="item in userList"
              style="min-width: 33%; text-align: center"
            >
              {{ item.mobile | mobileFilter }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showAllShare">
      <div class="popup">
        <div
          style="
            color: rgba(135, 33, 24, 1);
            line-height: 50px;
            font-weight: 600;
            font-size: 18px;
          "
        >
          <!-- 总分享人 -->
        </div>
        <div
          style="
            color: rgba(135, 33, 24, 1);
            line-height: 20px;
            font-weight: 500;
            width: 100%;
            display: flex;
            justify-content: space-around;
          "
        >
          <div style="text-align: center">
            <div
              style="
                line-height: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scTemaData.user_price }}
            </div>
            <div>总余额</div>
          </div>
          <div style="text-align: center">
            <div
              style="
                line-height: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scTemaData.user_score }}
            </div>
            <div>总积分</div>
          </div>
          <div style="text-align: center">
            <div style="line-height: 30px">{{ scTemaData.user_sum }}</div>
            <div>总分享人</div>
          </div>
        </div>

        <div
          style="
            width: 85vw;
            font-size: 10px;
            color: rgba(135, 33, 24, 1);
            margin: 10px;
            overflow: scroll;
            margin-top: 25px;
          "
        >
          <div
            style="
              display: flex;
              justify-content: space-around;
              border-bottom: 1px solid #f9ece7;
              line-height: 35px;
              font-size: 14px;
            "
          >
            <div style="min-width: 35%; text-align: center">级别</div>
            <div style="min-width: 15%; text-align: center">人数</div>
            <div style="min-width: 22.5%; text-align: center">余额</div>
            <div style="min-width: 22.5%; text-align: center">积分</div>
          </div>
          <div
            v-for="item in scTemaData.re_list"
            style="
              font-size: 10px;
              display: flex;
              justify-content: space-around;
              border-bottom: 1px solid #f9ece7;
              line-height: 35px;
              font-size: 14px;
            "
          >
            <div style="min-width: 35%; text-align: center">
              {{ item.role_name ? item.role_name : "" }}
            </div>
            <div style="min-width: 15%; text-align: center">
              {{ item.user_sum }}
            </div>
            <div
              style="
                min-width: 22.5%;
                text-align: center;
                font-size: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ item.user_price }}
            </div>
            <div
              style="
                min-width: 22.5%;
                text-align: center;
                font-size: 10px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ item.user_score }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {
  getReferralsummary,
  getFttusers,
  getFttusers2,
  getDepartment,
  getuserInfo,
  directLists,
  getAchievement,
  getReUserMobile,
  scTemaData,
} from "@/api/api";
import moment from "moment";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast } from "vant";
const config = {
  headers:{
    'Authorization': localStorage.getItem("token"),
    'token': localStorage.getItem("token")
  }
};

export default {
  name: "myteam",
  components: {
    navCom,
    Loading,
  },
  filters: {
    formatDate(val) {
      let time = moment(val * 1000).format("YYYY-MM-DD");
      return time;
    },
    formatTime(val) {
      let time = moment(val * 1000).format("YYYY-MM-DD hh:mm:ss");
      return time;
    },
    mobileFilter(val) {
      if (val == "" || val == undefined) {
        return "无";
      }
      let tell = /(\d{3})\d*(\d{4})/;
      let num = val.replace(tell, "$1****$2");

      return num;
    },
  },
  data() {
    return {
      showAllShare: false,
      // showAllShare:{},
      scTemaData: {},
      show: false,
      LOADING: false,
      showView: true,
      uid: weixin.getUserId(),
      active: 0,
      tabList: [
        { id: 1, title: "我的今日业绩" },
        { id: 2, title: "我的分享人数" },
      ],

      parentFttUser: null,
      referralChildCount: "", //业务经理数量
      teamCount: "", //市场
      childFttUsers: [], //获取市场列表
      childFttUsersShow: [], //显示市场列表
      childUserId: "", //我的市场用户
      childUserIdList: [], //我的市场用户列表

      isLoading: false,
      referralParentFttUser: {},
      userInfo: JSON.parse(localStorage.getItem("shareUser")),
      loading: true,
      finished: false,
      total: 0,
      pageNo: 1,
      todayData: [],
      achievement: {},
      inviteDataList: [],
      inviteData: {},
      userData: {},
      userList: [],
    };
  },
  mounted() {
    this.init();
    this.getInviteRecord();
    console.log("getFttusers2", JSON.parse(localStorage.getItem("shareUser")));
    // this.getAchievements()
  },
  methods: {
    showAllShareClick() {
      this.LOADING = true;
      scTemaData().then((res) => {
        console.log("scTemaData", res);
        this.LOADING = false;
        if (res.data.code == 1) {
          this.showAllShare = true;
          this.scTemaData = res.data.data;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    onRefresh() {
      this.init();

      this.isLoading = false;
    },
    //初始化
    init() {
      var userInfo = JSON.parse(localStorage.getItem("shareUser"));
      if (userInfo != null) {
        this.childActive(1);
        return;
      }
      this.LOADING = true;
      let urls = `${localStorage.getItem("share_weixin_shareurl")}/api/share/getuser`
      this.$axios.post(urls,{ wallet_type: "mutual" },config).then(res=>{
        this.LOADING = false;
        if(res.data.code == 1){
          this.dataInfo = res.data.data;
          this.todayData = this.userInfo.one_list;
        }else{
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
    },
    //数据加载
    onload() {
      let active = this.active;
      // this.childFtUserHandler(active)
      // this.getDepartment(active)
    },
    // 获取分享记录
    getInviteRecord() {
      directLists()
        .then((res) => {
          console.log(66, res);
          this.active = 0;
          this.inviteDataList = res.data.data.rows;
          this.inviteData = res.data.data;
        })
        .catch((err) => {});
    },
    showUserList(data) {
      this.userData = data;
      getReUserMobile({
        user_id: data.user_id,
      })
        .then((res) => {
          console.log("getReUserMobile", res);
          this.show = true;
          this.userList = res.data.data;
        })
        .catch((err) => {});
    },
    // // 今日业绩
    // getTodayData(){
    //   this.childFttUsersShow.forEach(item=>{
    //     if(moment(item.addtime).isSame(moment(), "day")){
    //       this.todayData = item
    //     }
    //   })
    // },
    // // 业绩总览
    // getAchievements(){
    //   getAchievement().then((result) => {
    //     Toast(result.data.msg)
    //     if(result.data.code == 1){
    //       this.achievement = res.data.data
    //     }
    //   }).catch((err) => {

    //   });
    // },
    //切换遍历数据
    getDepartment(active) {
      this.LOADING = true;
      getDepartment({
        status: active,
        offset: 1,
        limit: 10,
      }).then((res) => {
        this.LOADING = false;
        console.log("getDepartment", res);
        if (res.data.code == 1) {
          this.todayData = res.data.data;
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    // childFtUserHandler(val){

    //     this.childFttUsersShow = []
    //     if(this.childFttUsers.length == 0){
    //         this.loading = false
    //         return false
    //     }
    //     this.childFttUsers.forEach((item,index)=>{
    //             if(index == val ){
    //   this.childUserId = item.userId
    //   this.childFttUsersShow.push(item)
    //   getFttusers({fromUserIdUntilLeaf:this.childUserId,pageNo:this.pageNo,sort:'id DESC'}).then(res=>{
    //       if(res.data.code == 200){
    //           this.pageNo++
    //           this.childUserIdList = this.childUserIdList.concat(res.data.data.rows)
    //           this.total = res.data.data.total

    //           if(this.childUserIdList.length < 1 ){
    // this.finished = true
    //           }else if(this.childUserIdList.length >= this.total){
    // this.finished = true
    //           }else {
    // this.finished = false
    // this.loading = false
    //           }

    //       }
    //   })
    //             }
    //     })
    // },
    //业务经理
    referralChildCountHandler() {
      this.$router.push("/referralChildCount");
    },
    toIndependent() {
      this.$router.push({ name: 'independentPerson', params: { operType: 1 } })
    },
    //切换
    childActive(val) {
      this.childFttUsersShow = [];
      this.pageNo = 1;
      this.childUserIdList = [];
      if (val == 0) {
        this.getInviteRecord();
        this.todayData = this.userInfo.one_list;
      } else if (val == 1) {
        this.todayData = this.userInfo.one_list;
      } else if (val == 2) {
        this.getDepartment(3);
      }
    },
  },
};
</script>
<style></style>
<style scoped>
.van-tabs__nav {
  background-color: transparent;
}

p {
  padding: 0;
  margin: 0;
}

/deep/.van-tabs__nav--line {
  background-color: transparent !important;
  width: 100vw;
}

/deep/ .van-tab__text--ellipsis {
  font-weight: 600;
}

.noData {
  text-align: center;
  margin-top: 40px;
}

.box_padding {
  margin-left: 3%;
  margin-right: 3%;
}

.myteam_part1 {
  /* padding-top: 4vw; */
}

.my_part2 {
  width: 100%;
  background: #fff;
  border-radius: 1.3vw;
  margin-top: 4vw;
  height: 13.33vw;
}

.my_part2 img {
  float: left;
  display: block;
  margin-top: 4vw;
  margin-left: 5.3vw;
  width: 5.3vw;
  height: 5.3vw;
}

.my_part2 p {
  float: left;
  margin-top: 4vw;
  margin-left: 2.6vw;
  color: #222;
  font-size: 4vw;
}

.my_part3 {
  background: #fff;
  border-radius: 1.3vw;
  margin-top: 4vw;
  min-height: 28.33vw;
  padding: 10px;
  /* display: flex; */
  /* align-items: center; */
}

.my_part3 ul {
  margin-top: 3vw;
  flex: 1;
  display: flex;
  justify-content: space-around;
  /* flex-direction: column-reverse; */
  align-items: center;
  justify-content: center;
}

.my_part3 ul li {
  text-align: center;
  width: 31vw;
  margin-top: 10px;
}

/* .my_part3 ul li:last-child {
  border-right: none;
} */
.my_part3 ul li p {
  font-size: 5vw;
  color: #fe4b20;
  text-align: center;
  line-height: 20px;
}

.my_part3 ul li span {
  font-size: 3.5vw;
  color: #000;
  line-height: 30px;
}

.bg {
  background: #f1f3f6;
  min-height: 100vh;
}

.teamlist {
  margin: 0;
  height: auto;
  overflow: hidden;
  margin-bottom: 20vw;
  border-radius: 10px;
}

.teamlist li {
  display: flex;
  justify-content: space-between;
  padding: 0 5vw;
  background: #fff;
  margin-top: 4vw;
  height: auto;
  overflow: hidden;
  flex-direction: column;
  border-radius: 10px;
}

.teamlist_title {
  border-radius: 1.3vw;
  /* border-bottom: 1px solid #e8e8e8; */
  display: flex;
  justify-content: space-between;
  height: 14vw;
  line-height: 14vw;
}

.teamlist_title p {
  padding-left: 4vw;
  color: #999;
}

.teamlist_title span {
  /* padding-right: 4vw; */
  color: #ff491f;
}

.teamlist_bottom {
  display: flex;
  justify-content: space-between;
  height: 12vw;
  line-height: 12vw;
}

.teamlist_bottom p {
  padding-left: 0vw;
  color: #333;
}

.teamlist_bottom span {
  padding-right: 2vw;
  color: #ff0000;
}

.teamlist_bottom2 {
  height: 14vw;
  line-height: 14vw;
}

.teamlist_bottom2 p {
  padding-left: 0vw;
  color: #333;
}

.teamlist_bottom2 span {
  padding-right: 1vw;
  color: #ff0000;
}

.myteam_title {
  margin-top: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.myteam_title i {
  /* background: #ff491f;
  display: block;
  height: 4vw;
  width: 0.8vw; */
}

.myteam_title span {
  /* font-size: 3.7vw;
  display: block;
  padding-left: 2.6vw;
  font-weight: bold; */
}

.van-tab__text {
  font-size: 4vw !important;
}

.van-tabs__nav--line {
  background-color: transparent !important;
  width: 50vw;
}

.van-popup {
  background-color: transparent !important;
}

.popup {
  width: 90vw;
  min-height: 250px;
  background-image: url(../../assets/xyrybg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup .item1 {
  /* width: 336px; */
  height: 24px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-style: italic;
  color: #95613d;
  line-height: 42px;
}

.popup .item2 {
  height: 42px;
  font-size: 21px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #8d562f;
  line-height: 50px;
  text-shadow: 0px 5px 3px rgba(193, 133, 68, 0.29);
}

.popup .item3 {
  height: 21px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #97480f;
  line-height: 35px;
  display: flex;
  align-items: center;
}

.popup .item3 img {
  margin-left: 5px;
}

.popup .item4 {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  /* line-height: 44px; */
  margin-top: 35px;
  background: linear-gradient(
    0deg,
    rgba(249, 236, 135, 0.76) 0%,
    rgba(238, 174, 91, 0.76) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.popup .item5 {
  height: 19px;
  font-size: 5px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  opacity: 0.27;
  transform: scale(0.8);
}

.dlfzr {
  font-weight: 400;
  background-color: rgb(254, 75, 32);
  line-height: 30px;
  color: white;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
  border-radius: 2px;
  align-items: center;
  display: flex;
}

.dlfzr2 {
  font-weight: 400;
  background-color: #dfdfdf;
  line-height: 30px;
  color: white;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
  border-radius: 2px;
  display: flex;
  align-items: center;
}
</style>
